<template>
  <div>
    <div class="selection-title">
      <span>{{selectionTabsTitle}}</span>
    </div>
    <div class="selection-list">
      <ul class="one-level-menu-ul">
        <li class="one-level-menu-li" v-for="(item,index) in selectionListVar" @click="changeOneLevelMenu(index)" :key='index'>
          <div class="one-level-menu-text flex">
            <div class="one-level-menu-arrow my_text_center">
              <img :src="arrowRight" alt="向右箭头" class="arrow-right" v-show="item.status==0">
              <img :src="arrowBottom" alt="向下箭头" class="arrow-bottom" v-show="item.status==1">
            </div>
            <span class="one-level-menu-text">{{item.name}}</span>
          </div>
          <ul class="two-level-menu-ul" v-show="item.status == 1">
            <li class="two-level-menu-li" v-for="(el,k) in item.child" :class="{active:el.status}" @click.stop="changeTwoLevelMenu(index,k,el.name,el.id,el.class)" :key='k'>
              <span class="line"></span>
              <span class="two-level-menu-text">{{el.name}}</span>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import ArrowGrayBottom from "../../../assets/img/layout-left-bottom/arrow-gray-bottom.png";
import ArrowGrayRight from "../../../assets/img/layout-left-bottom/arrow-gray-right.png";

export default {
  data() {
    return {
      arrowBottom: ArrowGrayBottom,
      arrowRight: ArrowGrayRight,
    };
  },

  props: {
    selectionListVar:{
      type:Array,
    },
    selectionTabsTitle:{
      type:String
    }
  },

  watch: {
    selectionListVar(){
      if(this.$store.state.tabsName == '走势图表'){
            let name = this.selectionListVar[0].child[0].name;
            let id = this.selectionListVar[0].child[0].id;
            let classn = this.selectionListVar[0].child[0].class;
            let menu = {name:name,id:id,planclass:classn,key:1}
            this.$store.commit("setChartMenuName", menu);
      }
    }
  },

  methods: {
    // 点击一级菜单
    changeOneLevelMenu(index){
      this.selectionListVar.forEach((elem,i)=>{
        if(index == i){
          elem.status = 1;
          if(this.$store.state.tabsName == '走势图表'){
            this.selectionListVar[index].child.forEach((el,j) => {
               el.status = 0;
            })
            this.selectionListVar[index].child[0].status = 1;
            let name = this.selectionListVar[index].child[0].name;
            let id = this.selectionListVar[index].child[0].id;
            let classn = this.selectionListVar[index].child[0].class;
            let menu = {name:name,id:id,planclass:classn}
            this.$store.commit("setChartMenuName", menu);
          }
          else{
             this.$store.commit('setLeftTaba', {id:elem.id,status: elem.status,name: elem.name});
          }
        } else{
          elem.status = 0;
        }
      });
    },
    // 点击二级菜单
    changeTwoLevelMenu(index,k,name,id,classn){
      
      this.selectionListVar[index].child.forEach((el,j)=>{     
        if(k == j){         
          el.status = 1;
          let menu = {name:name,id:id,planclass:classn}
          if(this.$store.state.tabsName == '走势图表'){
            this.$store.commit("setChartMenuName", menu);
          } else if(this.$store.state.tabsName == '计划推荐'){
            let leftselect = {name:name,id:id,planclass:classn}
            this.$store.commit('setLeftcache',leftselect)
          }else{            
            this.$store.commit("setLeftMenuName", menu);
          }
        }else{
          el.status = 0;
        }
      });
    }
  }
};
</script>
<style lang='less' scoped>
@import url(../../../assets/css/layoutLeftBottomSelection/leftSelection.less);
</style>